<template>
  <div class="performance-module">
    <div class="menu-header">
      <el-scrollbar ref="scrollContainer" class="hide-scrollbar">
        <div class="menu-list">
          <div
            class="menu-item"
            v-for="(item, index) in tabsData"
            :key="index"
            :class="{ active: index === activeIndex }"
            @click="handleSelect(index)"
          >
            <span>{{ item.title }}</span>
            <span v-if="index === activeIndex" :style="{ left: '2px' }" class="line"></span>
          </div>
        </div>
      </el-scrollbar>
      <div class="menu-add">
        <el-button type="primary" round size="small" :icon="Plus" @click="handleAdd"></el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import { ref, nextTick } from 'vue'

const tabsData = ref([
  { id: 1, title: '客户', type: 'kh' },
  { id: 2, title: '收入', type: 'sr' },
  { id: 3, title: '理财', type: 'lc' }, // 图片中显示为当前激活状态
  { id: 4, title: '交易', type: 'jy' },
  { id: 5, title: '新增', type: 'xz' },
  { id: 6, title: '存量', type: 'cl' },
  { id: 7, title: '考核', type: 'kh' },
  { id: 8, title: '竞赛', type: 'js' },
  { id: 9, title: '其他', type: 'qt' },
  // 后续为多个指标标签，对应图片中的多个"指标"项
  { id: 10, title: '指标1', type: 'zb' },
  { id: 11, title: '指标2', type: 'zb' },
  { id: 12, title: '指标3', type: 'zb' },
  { id: 13, title: '指标4', type: 'zb' },
  { id: 14, title: '指标5', type: 'zb' },
  { id: 15, title: '指标6', type: 'zb' },
  { id: 16, title: '指标7', type: 'zb' },
  { id: 17, title: '指标8', type: 'zb' },
  { id: 18, title: '指标9', type: 'zb' },
  { id: 19, title: '指标10', type: 'zb' },
  { id: 20, title: '指标11', type: 'zb' },
  { id: 21, title: '指标12', type: 'zb' },
  { id: 22, title: '指标13', type: 'zb' },
  { id: 23, title: '指标14', type: 'zb' },
  { id: 24, title: '指标15', type: 'zb' }
])

const scrollContainer = ref(null)
const activeIndex = ref(0) // 默认选中"理财"（索引2）

const handleSelect = (index) => {
  if (activeIndex.value === index) return
  activeIndex.value = index

  nextTick(() => {
    // 获取滚动条组件的组件实例
    const container = scrollContainer.value.wrapRef
    // 获取激活项的元素
    const activeElement = container.querySelector('.active')
    // 安全判断，确保找到了激活元素
    if (!activeElement) return

    const containerRect = container.getBoundingClientRect() // 滚动容器的位置和尺寸信息
    const activeRect = activeElement.getBoundingClientRect() // 激活元素的位置和尺寸信息
    const scrollLeft = container.scrollLeft // 当前滚动位置

    // 判断激活项是否在可视区域内
    const isFullyVisible =
      activeRect.left >= containerRect.left && activeRect.right <= containerRect.right
    // 如果不在可视区域内，进行滚动
    if (!isFullyVisible) {
      // 计算需要滚动的距离
      let targetScrollLeft
      // 如果在左侧外部，滚动到前面
      if (activeRect.left < containerRect.left) {
        // 激活项在左侧外部，需要向左滚动使其显示在前面
        targetScrollLeft = scrollLeft + (activeRect.left - containerRect.left) - 20
      } else {
        // 激活项在右侧外部，需要向右滚动使其显示在后面
        targetScrollLeft = scrollLeft + (activeRect.right - containerRect.right) + 20
      }

      scrollContainer.value.scrollTo({
        left: targetScrollLeft,
        behavior: 'smooth'
      })
    } else {
      // 如果在可视区域内但位置不理想，可以微调
      const visibleWidth = containerRect.right - containerRect.left // 容器可见宽度
      const activeCenter = activeRect.left + activeRect.width / 2 // 激活项中心点
      const containerCenter = containerRect.left + visibleWidth / 2 // 滚动容器可视区域的中心点水平坐标

      // 如果激活项偏离中心太多，进行微调
      if (Math.abs(activeCenter - containerCenter) > visibleWidth / 3) {
        const adjustScrollLeft = scrollLeft + (activeCenter - containerCenter)
        scrollContainer.value.scrollTo({
          left: adjustScrollLeft,
          behavior: 'smooth'
        })
      }
    }
  })
}

const handleAdd = () => {
  nextTick(() => {
    const container = scrollContainer.value.wrapRef
    const scrollWidth = container.scrollWidth
    const clientWidth = container.clientWidth
    const scrollX = scrollWidth - clientWidth

    scrollContainer.value.scrollTo({
      left: scrollX,
      behavior: 'smooth'
    })
  })
}
</script>
<style lang="scss" scoped>
.performance-module {
  padding: 20px 40px;
  width: calc(100% - 80px);
  background-color: #fff;
  margin: 16px 0;
}
.menu-header {
  display: flex;
  justify-content: space-between;
  height: 35px;
  padding-top: 20px;
  padding-right: 50px;
  border-bottom: 1px solid #f2f3f5;
  position: relative;
  .menu-list {
    display: flex;
    width: 100%;
    height: 35px;
    .menu-item {
      font-size: 16px;
      margin-right: 40px;
      color: #86909c;
      line-height: 24px;
      height: 24px;
      font-weight: 400;
      cursor: pointer;
      font-family: AliRegularL3;
      // 把内容撑开
      flex-shrink: 0;
    }
    .active {
      color: #0f5fff;
      font-size: 18px;
      font-family: AliMedium;
      position: relative;
      .line {
        width: 28px;
        height: 3px;
        background: #0f5fff;
        border-radius: 8px;
        position: absolute;
        bottom: -11px;
        text-align: center;
      }
    }
  }
  .menu-add {
    position: absolute;
    top: 16px;
    right: 16px;
    height: 35px;
    width: 20px;
  }
}

// 隐藏滚动条的核心样式
.hide-scrollbar {
  :deep(.el-scrollbar__bar) {
    opacity: 0 !important; // 完全隐藏滚动条
    pointer-events: none; // 禁止鼠标交互
    transition: opacity 0.3s; // 平滑过渡效果
  }

  :deep(.el-scrollbar__wrap) {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; // Firefox 隐藏滚动条
    -ms-overflow-style: none; // IE/Edge 隐藏滚动条

    &::-webkit-scrollbar {
      display: none; // Chrome/Safari 隐藏滚动条
      width: 0;
      height: 0;
    }
  }

  // 可选：只在悬停时显示很细的滚动条（如果需要）
  // &:hover {
  //   :deep(.el-scrollbar__bar) {
  //     opacity: 0.3 !important; // 轻微显示
  //   }
  // }
}

// 确保滚动功能正常
:deep(.el-scrollbar) {
  overflow: hidden;

  &:hover {
    :deep(.el-scrollbar__bar) {
      opacity: 0; // 保持隐藏
    }
  }
}
</style>
